<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=v2oNvBQskcpLeRzL5AhGSEDlMqWKLRRb"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <title>旅游行程安排服务原型系统</title>
    <script src="lib/jquery_3.2.1_jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 60px;
            background-color: whitesmoke;
        }

        h2 {
            float: left;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        .header {
            float: right !important;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            text-align: center;
        }

        #func {

            position: relative;

            width: 100%;
        }

        /* #func .demand {
            position: absolute;
            float: left;
            z-index: 3;
            background-color: rgba(0, 0, 0, 0.4);
            width: 250px;
            height: 275px;
            margin-top: 30px;
            margin-left: 30px;
            border-radius: 10px;
        } */

        #func .line {
            position: absolute;
            float: right;
            right: 30px;
            z-index: 3;
            background-color: rgba(0, 0, 0, 0.4);
            width: 200px;
            height: 400px;
            margin-top: 30px;
            margin-right: 30px;
            border-radius: 10px;
            text-align: center;
        }

        #func .select {
            font-size: 18px;
            margin: 10px 20px 20px 20px;
        }

        #func .select>input {
            font-size: 20px;
            width: 150px;
        }

        #func .suanfa {
            padding-top: 10px;
            padding-left: 35px;
            margin: auto;
        }

        .button1 {
            margin-top: 20px;
            text-align: center;
        }

        .button1 input {
            width: 70px;
            border-color: transparent;
            border-radius: 5px;
            font-size: 17px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        #allmap {
            height: 1265px;
        }

        .clear {
            clear: both;
        }

        .zhezhao {
            position: absolute;
            z-index: 4;
            left: 0px;
            top: 0px;
            background: rgba(0, 0, 0, 0.7);
            width: 100%;
            height: 100%;
            /* opacity: 0.8; */
        }

        .tankuang {
            position: relative;
            background-color: white;
            width: 65%;
            height: 80%;
            border-radius: 5px;
            margin: 5% auto;
            opacity: 1;
            text-align: center;
            overflow: scroll;
        }

        .head {
            height: 40px;
        }

        /* x键 */
        .head-right {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        }

        .nav button {
            border: none;
            font-size: 20px;
        }

        .line select {
            border: none;
            width: 150px;
            height: 30px;
            font-size: 15px;
        }

        .line .button2 {
            position: absolute;
            right: 90px;
            top: 300px;
            font-size: 18px;
        }

        #jingdian table {
            border: 1px solid black;
            text-align: center;
            margin: auto;

        }

        #xuqiu table {
            border: 1px solid black;
            text-align: center;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="nav">
        <h2>旅游服务可视化系统</h2>
        <!-- <div class="header">算法结果分析</div> -->
        <!-- <div class="header">旅游服务运行状态分析</div> -->
        <div class="header"><button type="button" onclick="openheatmap()">旅游服务运行状态分析</button></div>
        <div class="header"><button type="button" onclick="openbox()">线路可视化</button></div>
        <!-- <div class="header">景点</div> -->
        <div class="header"><button type="button" onclick="dianwo1()">旅游服务</button></div>
        <div class="header"><button type="button" onclick="dianwo2()">游客需求</button></div>

        <div class="zhezhao" id='zhezhao'>
            <!-- 这里是弹框界面及其显示的内容 -->
            <!-- 游客服务 -->
            <div class="tankuang" id="fw">
                <div class="head">
                    <div style="font-size: 24px;">旅游服务信息表</div>
                    <div class="head-right" onclick="hidder1()">x</div>
                </div>
                <div id="jingdian">
                    <table border="1" cellpadding="0" cellspacing="0" width=1500px>
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>名称</td>
                                <td>类型</td>
                                <td>地址</td>
                                <td>经度</td>
                                <td>纬度</td>
                                <td>口碑</td>
                                <td>时间</td>
                                <td>价格</td>
                            </tr>
                        </thead>
                        <tbody id="contain1"></tbody>
                    </table>
                </div>
                <!-- 游客需求 -->
            </div>
            <div class="tankuang" id="xq" style="width: 800px;">
                <div class="head">
                    <div style="font-size: 24px;">游客需求</div>
                    <div class="head-right" onclick="hidder2()">x</div>
                </div>
                <div id="xuqiu">
                    <table border="1" cellpadding="0" cellspacing="0" width='600px'>
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>游客</td>
                                <td>发送时间</td>
                                <td>评分预算</td>
                                <td>时间预算</td>
                                <td>价格预算</td>
                            </tr>
                        </thead>
                        <tbody id="contain2"></tbody>
                    </table>
                </div>
            </div>

        </div>
        <script type="text/javascript">
            document.getElementById('zhezhao').style.display = "none";
            function dianwo1() {
                document.getElementById('zhezhao').style.display = "none";
                document.getElementById('fw').style.display = 'none';
                document.getElementById('xq').style.display = 'none';
            }
            function hidder1() {
                document.getElementById('zhezhao').style.display = "none";
            }
            document.getElementById('zhezhao').style.display = "none";
            function dianwo2() {
                document.getElementById('zhezhao').style.display = "";
                document.getElementById('xq').style.display = '';
                document.getElementById('fw').style.display = 'none';
            }
            function hidder2() {
                document.getElementById('zhezhao').style.display = "none";
            }
        </script>
        <div class="clear"></div>
    </div>
    <div id="func">
        <!-- 
        <div class="demand">
            <div style="text-align: center;margin-top: 10px;">旅游需求</div>
            <div class="select">天数 <input type="text"></div>
            <div class="select">价格 <input type="text"></div>
            <div class="select">口碑 <input type="text"></div>
            <div class="suanfa">
                <input type="radio" value="" name="algorithm">算法1
                <input type="radio" value="" name="algorithm">算法2
                <input type="radio" value="" name="algorithm">算法3

            </div>
            <div class="button1"><input type="submit" value="确定" name="subm"></div>
        </div> -->
        <div class="line">线路<br>
            <form>
                <select class="com-opt">
                    <option value="line1">线路1</option>
                    <option value="line2">线路2</option>
                    <option value="line3">线路3</option>
                    <option value="line4">线路4</option>
                </select>
            </form>
            <div class="button2"><input type="submit" value="确定" name="sub"></div>
        </div>

    </div>



    </div>
    <div style="width: 200px;height: 200px;background-color: blueviolet;display: none;" id="box">box</div>
    <!-- 创建地图容器元素 -->
    <!-- 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。 -->
    <div id="allmap">
        <script>
            var map = new BMap.Map("allmap");    // 创建Map实例
            var mapStyle = { style: "*googlelite*" };
            map.setMapStyle(mapStyle);
            map.centerAndZoom(new BMap.Point(114.311873, 30.550218), 13);  // 初始化地图,设置中心点坐标和地图级别

            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]
            }));
            map.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
            var mapStyle = { style: "*googlelite*" };
            map.setMapStyle(mapStyle);
            var opts = {
                width: 280,
                height: 150,
                title: "",
                enableMessage: true,
            };

            var navigation = new BMap.NavigationControl();
            navigation.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            map.addControl(navigation);
            map.addControl(new BMap.GeolocationControl());

            var marklist1 = [];
            var title = [];
            
            $(function () {
                // 根据数组的内容,生成页面中的table表格
                // 建立数组
                $.get("point1.json", function (data) {
                    var data_info = data


                    for (var i = 0; i < data_info.length; i++) {
                        var marker = new BMap.Marker(new BMap.Point(data_info[i].经度, data_info[i].纬度));
                        var t1 = data_info[i].景点名称;
                        var content = "<h4 style='color:#CC5522;font-size:17px;margin:0 0 5px 0;padding:0.2em 0'>" + data_info[i].景点名称 + "</h4>" +

                            "<p style='font:15px arial,sans-serif;margin:0;line-height:1.5;'>地址：" + data_info[i].地址 + "</p>" +
                            "<p style='font:15px arial,sans-serif;margin:0;line-height:1.5;'>经度：" + data_info[i].经度 + "</p>" +
                            "<p style='font:15px arial,sans-serif;margin:0;line-height:1.5;'>纬度：" + data_info[i].纬度 + "</p>" +
                            "</div>";
                        marklist1.push(marker);
                        title.push(t1);
                        // map.addOverlay(marker);
                        // var label = new BMap.Label(title[i], { offset: new BMap.Size(30, 0) });//label.setStyle({ });
                        // marker.setLabel(label);
                        addMarkerInfo(marker, content);
                        marklist1.forEach(function (item) { item.show(); })

                    }


                    function addMarkerInfo(marker, content) {
                        var infoWindow = new BMap.InfoWindow(content, opts);
                        marker.onclick = function () {
                            marker.openInfoWindow(infoWindow);
                        }
                    }
                }
                )
            }
            )
            // 表格
            $(function () {
                // 根据数组的内容,生成页面中的table表格
                // 建立数组
                $.get("point1.json", function (data) {
                    var arr1 = data
                    // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
                    var str1 = '';
                    //外层循环,生成tr
                    for (var i = 0; i <= arr1.length - 1; i++) {
                        // 外层循环生成tr标签,循环几次,就生成几个tr标签
                        // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
                        str1 += '<tr>';

                        // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
                        str1 += `<td>${i + 1}</td>`;

                        //当前行,对应的二维数组，循环的对象是 arr[i] , 
                        //生成 arr[i] 的所有的索引下标，通过索引下标,获取对应的数据。
                        // 起始数值是0 终止数值是 arr[i]的最大索引下标，arr[i]的length-1
                        for (var n in arr1[i]) {
                            str1 += "<td align='center'>" + arr1[i][n] + "</td>";
                        }
                        str1 += '</tr>';
                    }
                    // 将定义好的内容,写入到taody标签中
                    contain1.innerHTML = str1;
                })
            })

            $(function () {
                // 根据数组的内容,生成页面中的table表格
                // 建立数组
                $.get("游客需求.json", function (data) {
                    var arr2 = data
                    // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
                    var str2 = '';
                    //外层循环,生成tr
                    for (var i = 0; i <= arr2.length - 1; i++) {
                        // 外层循环生成tr标签,循环几次,就生成几个tr标签
                        // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
                        str2 += '<tr>';

                        // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
                        str2 += `<td>${i + 1}</td>`;

                        //当前行,对应的二维数组，循环的对象是 arr[i] , 
                        //生成 arr[i] 的所有的索引下标，通过索引下标,获取对应的数据。
                        // 起始数值是0 终止数值是 arr[i]的最大索引下标，arr[i]的length-1
                        for (var n in arr2[i]) {
                            str2 += "<td align='center'>" + arr2[i][n] + "</td>";
                        }
                        str2 += '</tr>';
                    }
                    // 将定义好的内容,写入到taody标签中
                    contain2.innerHTML = str2;
                })
            })
            // 热力图
            var openheatmap;
            $(function () {
                // 根据数组的内容,生成页面中的table表格
                // 建立数组
                $.get("方法.json", function (data) {
                    var points = data

                    if (!isSupportCanvas()) {
                        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
                    }
                    //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
                    //参数说明如下:
                    /* visible 热力图是否显示,默认为true
                     * opacity 热力的透明度,1-100
                     * radius 势力图的每个点的半径大小   
                     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
                     *	{
                            .2:'rgb(0, 255, 255)',
                            .5:'rgb(0, 110, 255)',
                            .8:'rgb(100, 0, 255)'
                        }
                        其中 key 表示插值的位置, 0~1. 
                            value 为颜色值. 
                     */
                    heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 50 });
                    map.addOverlay(heatmapOverlay);
                    heatmapOverlay.setDataSet({ data: points, max: 20 });
                    //是否显示热力图
                    var flag1 = 0;
                    heatmapOverlay.hide()
                    function openHeatmap() {
                        if (flag1 == 0) {
                            heatmapOverlay.hide();
                            flag1 = 1
                        } else {
                            heatmapOverlay.show();
                            flag1 = 0
                        }

                    }
                    openheatmap = openHeatmap
                    function setGradient() {
                        /*格式如下所示:
                      {
                              0:'rgb(102, 255, 0)',
                                .5:'rgb(255, 170, 0)',
                              1:'rgb(255, 0, 0)'
                      }*/
                        var gradient = {};
                        var colors = document.querySelectorAll("input[type='color']");
                        colors = [].slice.call(colors, 0);
                        colors.forEach(function (ele) {
                            gradient[ele.getAttribute("data-key")] = ele.value;
                        });
                        heatmapOverlay.setOptions({ "gradient": gradient });
                    }
                    //判断浏览区是否支持canvas
                    function isSupportCanvas() {
                        var elem = document.createElement('canvas');
                        return !!(elem.getContext && elem.getContext('2d'));

                    }
                }
                )
            }
            )



            var line = document.querySelector('.line')
            var flag2 = 0
            line.style.display = 'none'
            function openbox() {
                if (flag2 == 0) {
                    line.style.display = 'block'
                    flag2 = 1
                } else {
                    line.style.display = 'none'
                    flag2 = 0
                }
            }
        </script>

    </div>

</body>

</html>